<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%" class=""></div>
		<!-- Notifications -->
		<div class="notifications f f-a-c f-j-b">
			<div class="leftNotifications">Notifications setting</div>
		</div>
		<!-- body -->
		<div class="settingBody">
			<div class="switch">
				<div class="switchTop f f-a-c"><span>Account activity</span><el-switch v-model="value" style="--el-switch-on-color: #000; --el-switch-off-color: #dcdfe6" size="small" /></div>
				<div class="count">For important updates regarding your activity, certain notifications cannot be disabled.</div>
			</div>
			<div class="xian"></div>
			<div class="email f f-a-c">
				<div @click="oneEm = !oneEm" class="lef hand f f-a-c">
					<div class="img">
						<img src="/src/assets/user/weigou.png" v-if="!oneEm" class="gouImg" alt="" />
						<img src="/src/assets/user/gou.png" v-else class="gouImg" alt="" />
					</div>
					<div class="text">Email</div>
				</div>
				<div @click="smsXun" class="lef hand f f-a-c">
					<div class="img">
						<img src="/src/assets/user/weigou.png" v-if="!sms" class="gouImg" alt="" />
						<img src="/src/assets/user/gou.png" v-else class="gouImg" alt="" />
					</div>
					<div class="text">SMS</div>
				</div>
			</div>
			<div class="when">Send me notifications when:</div>
			<div class="setle">
				<div>
					<el-checkbox v-model="checked1" label="I receive a new order" size="large" />
				</div>
				<div>
					<el-checkbox v-model="checked2" label="I receive new message" size="large" />
				</div>
				<div>
					<el-checkbox v-model="checked3" label="Session status changed" size="large" />
				</div>
				<div>
					<el-checkbox v-model="checked4" label="I receive new review" size="large" />
				</div>
			</div>
		</div>
		<el-dialog v-model="dialogTableVisible" @close="close" title="" width="540">
			<div class="verify">Verify</div>
			<div class="inps">
				<div class="inpname">Phone number</div>
				<input type="text" class="input" v-model="phonValue" name="" id="" />
			</div>
			<div class="inps">
				<div class="inpname">verification code</div>
				<input type="text" class="input" v-model="codeValue" name="" id="" />
			</div>
			<div class="verif f f-a-c"><div class="hand btn">Verify</div></div>
		</el-dialog>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import { ElMessage } from "element-plus";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let phonValue = ref("");
	let codeValue = ref("");
	let checked1 = ref(false);
	let checked2 = ref(false);
	let dialogTableVisible = ref(false);
	let checked3 = ref(false);
	let checked4 = ref(false);
	let oneEm = ref(false);
	let sms = ref(false);
	let ind = ref(1);
	let value = ref(true);
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	const smsXun = () => {
		sms.value = !sms.value;
		if (sms.value) {
			dialogTableVisible.value = true;
		}
	};
	// 关闭弹出层的时候触发的
	const close = () => {
		if (!codeValue.value.length || !phonValue.value.length) {
			sms.value = false;
		}
	};
	// 切换分页
	const sizeChange = e => {
		console.log(e, "1111111");
	};
	// 切换分页
	const currentChange = e => {
		console.log(e, "1111111");
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
